
//================================================================================
//region IMports
//================================================================================

.no_outline {
  outline: none !important;
}

.no_outline:focus {
  outline: none !important;
}

.font_extra_large {
  font-size: 34px;
}

.font_extra_title {
  font-size: 28px;
}

.font_large {
  font-size: 24px;
}

.font_title {
  font-size: 18px;
}

.font_extra_text {
  font-size: 16px;
}

.font_text {
  font-size: 14px;
  font-weight: 400;
}

.font_comment {
  font-size: 12px;
  font-weight: 400;
}

.font_bold {
  font-weight: bold;
}

.title_empty_color {
  color: #f49c00;
}

.no_select {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.can_select {
  user-select: text;
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -o-user-select: text;
}

.vertical_scrollbar_visible {
  overflow-y: scroll;

  &::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }
}

//================================================================================
//endregion
//================================================================================

//================================================================================
//region Meta CSS
//================================================================================

.no_border {
  border: none;
}

cscript {
  display: none !important;
}

.full_width {
  width: 100%;
}

.title_font {
  font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
}

.img_fit_container {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.amap-logo {
  display: none !important;
}

.bg_white {
  background: white;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.stripe_default {
  background: white;
}

.stripe_colorful {
  background-color: #ECF7FA;
}

.stripe_colorful1 {
  background-color: #E6E7E8;
}

.stripe_gray {
  background: #f2f2f2;
}

.stripe_selected {
  background-color: #1b75bc;
  color: white;
}

.selected_color {
  background-color: #1b75bc;
}

.dashed_hr {
  border-top: 1px dashed #1B75BC;
  margin: 0;
  padding: 0 !important;
}

//================================================================================
//endregion
//================================================================================

//================================================================================
//region Mods to angular-material
//================================================================================

md-checkbox {
  .md-label {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
  }

  .md-icon {
    /*
     * Change md-checkbox color here
     */
    background-color: rgba(255, 64, 129, 0.87);
  }

  :not(.md-checked) {
    .md-icon {
      //border-color: rgba(0,0,0,0.54);
      background-color: initial;
    }
  }
}

.md-select-menu-container.md-active md-select-menu {
  /*transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);*/
  /*transition-duration: 150ms;*/
  transition: none;
  -webkit-transition-duration: 0ms;
  -moz-transition-duration: 0ms;
  -ms-transition-duration: 0ms;
  -o-transition-duration: 0ms;
  transition-duration: 0ms;
}
.md-select-menu-container.md-active md-select-menu > * {
  opacity: 1;
  /*transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);*/
  /*transition-duration: 150ms;*/
  /*transition-delay: 100ms;*/
  transition: none;
  -webkit-transition-duration: 0ms;
  -moz-transition-duration: 0ms;
  -ms-transition-duration: 0ms;
  -o-transition-duration: 0ms;
  transition-duration: 0ms;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
.md-select-menu-container.md-leave {
  opacity: 0;
  /*transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);*/
  /*transition-duration: 250ms; */
  transition: none;
  -webkit-transition-duration: 0ms;
  -moz-transition-duration: 0ms;
  -ms-transition-duration: 0ms;
  -o-transition-duration: 0ms;
  transition-duration: 0ms;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

//================================================================================
//endregion
//================================================================================

//================================================================================
//region Layout
//================================================================================

.horizontal_space_between(@space) {
  &:not(:first-child) {
    margin-left: @space;
  }
}

.horizontal_space_between_6px {
  .horizontal_space_between(6px);
}

.horizontal_space_children(@space) {
  > * {
    .horizontal_space_between(@space);
  }
}

.horizontal_space_children_6px {
  .horizontal_space_children(6px);
}

//================================================================================
//endregion
//================================================================================

//================================================================================
//region Buttons
//================================================================================

.button_like {
  outline: none !important;
  cursor: pointer;
  .no_select;
  text-decoration: none;
}

.standard_button {
  .button_like;
  color: white;
  background-color: #1B75BC;
  border-radius: 3px;
  text-align: center;
}

.standard_button.disabled {
  background-color: gray;
}

.standard_button_blue {
  .button_like;
  min-width: 100px;
  line-height: 40px;
  vertical-align: middle;
  background-color: #1B75BC;
  color: white;
  text-align: center;
  margin-left: 20px;
  cursor: pointer;
  border-radius: 2px;
  text-decoration: none;

  &:first-child {
    margin-left: 0;
  }
}

.standard_button_blue.disabled {
  background-color: gray;
}

.standard_button_30 {
  .standard_button;
  height: 30px;
  line-height: 30px;
  margin-left: unset;
}

.standard_button_blue_30 {
  .standard_button_blue;
  height: 30px;
  line-height: 30px;
  margin-left: unset;
}

.standard_line {
  height: 40px;
  .horizontal_space_between(6px);
}

//================================================================================
//endregion
//================================================================================

.page_container {
  .navbar {
    height: 60px;
  }

  .map_area {
    .side_bar {
      width: 280px;
      padding-left: 10px;
      padding-right: 10px;

      .transformer_panel {
        .standard_button_blue.inactive {
          background: #888888;
        }
      }

      .model_list {
        overflow-x: hidden;
        overflow-y: auto;

        .model_item {
          min-height: 44px;

          &.odd {
            .stripe_colorful;
          }

          &.even {
            .stripe_colorful1;
          }

          &.selected {
            .stripe_selected;
          }

          .model_item_no {
            width: 80px;
            text-align: center;
          }

          .model_item_name {
            font-size: 16px;
          }
        }
      }

      .model_edit_panel {

        overflow-x: hidden;
        overflow-y: auto;

        md-select {
          margin: 0;
        }

        .model_param_panel {
          height: 40px;

          .model_param_name {
            width: 80px;
          }

          .model_param_value {
            width: auto;

            md-select {
              width: 100%;
            }
          }

          .model_param_input {
            width: 100%;
            height: 100%;
            line-height: 100%;
          }
        }

      }

      .model_op_panel {

        padding-top: 10px;
        padding-bottom: 10px;

        .standard_button_blue {
          min-width: 0;
        }

      }
    }

    .map_content {

      position: relative;

      .mapbox-container, .map-container {
        position: absolute;
        width: 100%;
        top: 0;
        height: 100%;
        left: 0;
        bottom: 0;
        right: 0;
      }

      .mapmode_button {
        position: absolute;
        top: 100px;
        right: 10px;
        width: 42px;
        height: 42px;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px;
      }

      .mapmode_button img {
        width: 42px;
        height: 42px;
      }

      .mapmode_button.satellite_mode {
        display: none;
      }

      .mapmode_button.map_mode {
        display: block;
      }

    }
  }
}
